<template>
<div class="upload-wrapper">
    <el-upload
      class="uploader"
      action="#"
      :http-request="handleUpload"
      :show-file-list="false"
      :disabled='disabled'
      v-loading="loading"
      >
      <!-- 清空按钮 -->
      <img  v-show="!disabled && !loading" v-if="preview" class="uploader-cancel" src="@/assets/images_accredited/qyrz_close_icon.png" alt="qyrz_close_icon" @click.stop="preview=''" >
      <!-- 回显图片 -->
      <div v-if="preview" class="uploader-imgBox" @click.stop="dialogVisible = true">
        <img :src="preview" class="uploader-img">
      </div>
      <div v-else class="uploader-icon">
        <i class="el-icon-plus"></i>
        <span>{{'上传图片'}}</span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" ref="dialog" width="70%" class="preview-dialog" :append-to-body="true">
      <img width="100%" :src="preview" alt="preview">
    </el-dialog>
  </div>
</template>

<script>
import {uploadFile,getUrl} from "@/api/shop/api";
import {convertImgToBase64} from '@/utils/zh-cloud'
export default {
  name:'UploadImg',
  props:{
    disabled:{
      type:Boolean,
      default:false
    },
    src:{
      type:String,
    }
  },
  watch:{
    src:{
      handler(val){
        val && this.handleGetImage(val)
      },
      immediate:true,
    }
  },
  data(){
    return {
      loading:false,
      preview:'',
      dialogVisible:false
    }
  },
  methods:{
    handleGetImage(src){
      this.loading = true
      getUrl([src]).then(value=>{
        const imgURL = Object.values(value.data)[0]
        //在线链接转base64
        return convertImgToBase64(imgURL).then(base64Img=>{
          this.preview = base64Img
        })
      }).finally(()=>{
        this.loading = false
      })
    },
    checkFile(file){
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      let isPass = false
      const regExp = /image\/(jpg|jpeg|png)/
      isPass = regExp.test(file.type)
      if (!isPass) {
        this.$message.error('图片要求jpg/jpeg/png格式');
      }
      return isPass && isLt5M
    },
    handleUpload({file}){
      let formData = new FormData();
      formData.append("file", file);
      if(this.checkFile(file)){
        this.loading = true
        uploadFile(formData).then(res=>{
          this.$emit('handleGetUrl',res.data.url)
        }).catch(err=>{
          this.loading = false
        })
        //本地文件转base64
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          this.preview = reader.result
        };
      }
    },
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-upload{
  // border: .02rem dashed #E4E9F4;
  border-radius: .08rem;
  cursor: pointer;
  position: relative;
  // overflow: hidden;
  background-color: #fff;
  width: 2.85rem;
  height: 2.85rem;
}



.upload-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F5F6FA;
  border-radius: .08rem;
  height: 3.22rem;
  width: 3.22rem;
}

.uploader-icon{
  border: .02rem dashed #E4E9F4;
  border-radius:.08rem;
}

.upload-sample{
  background-color: #F5F6FA;
  border-radius: .08rem;
  height: 3.22rem;
  width: 3.22rem;
  display: flex;
  flex-flow:column nowrap;
  align-items: center;
  img{
    border: .01rem dashed #999;
    margin-top: .2rem;
    width: 2.76rem;
  }
  p{
    margin-top: .22rem;
    color: #777777 ;
    font-size: .18rem;
  }
}

.upload-tips{
  height: 3.22rem;
  display: flex;
  flex-flow:column nowrap;
  justify-content: flex-end;
  font-size: .16rem;
  line-height: 2;
  color: #B9BAC1;
  span{
    color: #333 ;
  }
  .download{
    margin-bottom: .4rem;
    cursor: pointer;
    text-decoration: underline;
    color: #234EB1;
    font-weight: 700;
    font-size: .18rem;

  }
}

.uploader{
  width: 2.85rem;
  height: 2.85rem;

  &-imgBox{
    position: relative;
    overflow: hidden;
    height:100%;
    cursor: zoom-in;
  }

  &-img{
    position:absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
  }

  &-cancel{
    position:absolute;
    width: .44rem;
    height: .44rem;
    transform: translate(50%,-50%);
    top: .1rem;
    right: .04rem;
    cursor: pointer;
    z-index:1;
  }

  &-icon{
    font-size: .18rem;
    color: #234EB1;
    width: 2.85rem;
    height: 2.85rem;
    // line-height: 2.85rem;
    text-align: center;
    display: flex;
    flex-flow:column nowrap;
    align-items: center;
    justify-content: center;
    i{
      font-size: .38rem;
      font-weight: 700;
      line-height: .38rem;
    }
  }
}


</style>
